/**
 * iconPicker 图标选择器
 * https://github.com/zkboys/react-admin/tree/master/src/components/icon-picker
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Icon, Row, Col, Button, Input } from 'antd';
import Modal from 'drag-modal'; //同antd自带的Modal
import icons from './icons';

export default class IconPicker extends Component {
  static propTypes = {
    visible: PropTypes.bool,
    title: PropTypes.any,
    onOk: PropTypes.func,
    onCancel: PropTypes.func,
  };

  static defaultProps = {
    visible: false,
    title: 'Ant Design Icon',
    onOk: () => {},
    onCancel: () => {},
  };

  state = {
    selectedIcon: '',
    dataSource: icons,
  };

  componentDidUpdate(prevProps) {
    const { visible } = this.props;

    // 打开弹框
    if (!prevProps.visible && visible) {
      this.handleBeforeOpen();
    }
  }

  handleBeforeOpen = () => {};

  handleOk = () => {
    const { onOk } = this.props;
    const { selectedIcon } = this.state;

    if (onOk) onOk(selectedIcon);
  };

  handleCancel = () => {
    const { onCancel } = this.props;
    if (onCancel) onCancel();
  };

  handleClick = selectedIcon => {
    this.setState({ selectedIcon });
  };

  handleInputChange = e => {
    const { value } = e.target;
    const dataSource = icons.map(item => {
      const types = item.types.filter(it => it.indexOf(value) !== -1);
      return { ...item, types };
    });

    this.setState({ dataSource });
  };

  render() {
    const {
      visible,
      title: modalTitle = 'Ant Design Icon',
      onOk,
      onCancel,
      ...others
    } = this.props;

    const { dataSource, selectedIcon } = this.state;

    return (
      <Modal
        width={600}
        {...others}
        title={modalTitle}
        visible={visible}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        saveDistance={0}
      >
        <div style={{ marginBottom: 16 }}>
          <Input.Search placeholder="Search" onChange={this.handleInputChange} />
        </div>
        <div style={{ height: document.body.clientHeight - 390, overflow: 'auto' }}>
          {dataSource.map(item => {
            const { title, types } = item;

            if (!(types && types.length > 0)) return null;

            return (
              <div key={title}>
                <h3>{title}</h3>
                <Row>
                  {types.map(type => (
                    <Col style={{ marginBottom: 16 }} key={type} span={3}>
                      <Button
                        style={{
                          display: 'flex',
                          flexDirection: 'column',
                          justifyContent: 'center',
                          alignItems: 'center',
                          width: 50,
                          height: 50,
                          cursor: 'pointer',
                        }}
                        type={selectedIcon === type ? 'primary' : 'default'}
                        onClick={() => this.handleClick(type)}
                      >
                        <Icon style={{ fontSize: 20 }} type={type} />
                      </Button>
                    </Col>
                  ))}
                </Row>
              </div>
            );
          })}
        </div>
      </Modal>
    );
  }
}
